<template>
  <view>
    <!-- 搜索 -->
    <YgSearch />
    <!-- 轮播图 -->
    <view>
      <u-swiper
        :list="swiperList"
        name="image_src"
        :height="340"
        :border-radius="0"
      ></u-swiper>
    </view>
    <!-- 分类导航 -->
    <view class="categoryWrapper">
      <u-image
        class="categoryImage"
        v-for="item in categoryList"
        :key="item.name"
        :src="item.image_src"
        mode="widthFix"
      ></u-image>
    </view>
    <!-- 楼层 -->
    <view class="floorWrapper">
      <FloorItem v-for="item in floorList" :key="item.name" :item="item"/>
    </view>
  </view>
</template>

<script>
  import FloorItem from './components/FloorItem.vue'
  export default {
    components: {
      FloorItem
    },
    data() {
      return {
        swiperList: [],
        categoryList: [],
        floorList: [],
      };
    },
    onLoad() {
      // 相当于 created
      this.getSwiper();
      this.getCategory();
      this.getFloor();
    },
    methods: {
      async getSwiper() {
        // const [err, res] = await uni.request({
        //   url: "http://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        // });
        // if (!err) {
        //   this.swiperList = res.data.message;
        // }
        // 调用 this.$u.get 请求封装
        const {message} = await this.$u.get('/home/swiperdata')
        this.swiperList = message
      },
      async getCategory() {
        const {message} = await this.$u.get("/home/catitems")
        this.categoryList = message
      },
      async getFloor() {
        const {message} = await this.$u.get("/home/floordata")
        this.floorList = message
      },
    },
  };
</script>

<style lang="scss" scoped>
  .categoryWrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 12rpx;
    .categoryImage {
      width: 128rpx;
      height: 140rpx;
    }
  }
  .floorWrapper {
    margin-top: 43rpx;
  }
</style>